@keyframes fadeIn {
    from {opacity: 0};
    to {opacity: 1};
}

/*\
|*|     HEADER
\*/

header {
    background-color: var(--color-dark);
    position: relative;
    height: 100px;
    padding: 0;
    margin: 0;
    user-select: none;
}

#logo {
    display: inline-block;
    height: 40px;
    font-size: 36px;
    margin: 30px;
}

#user-menu {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 150px;
    height: 40px;
    margin: 30px;
    background-color: var(--color-func-blue);
    color: var(--color-text-dark);
    border-radius: var(--radius-l);
    display: flex;
    flex-direction: column;
    align-items: justify;
    overflow-x: clip;
    text-align: center;
    z-index: 1;
    animation: fadeIn var(--duration-s) ease-out 1 normal;

    transition-duration: var(--duration-s);
    transition-property: height;
    transition-timing-function: ease-out;
}

#user-menu.open {
    height: 130px;
}

#user-menu > .name {
    font-size: 20pt;
    max-width: 300px;
    box-sizing: border-box;
    overflow-x: clip;
    text-overflow: ellipsis;
    line-height: 40px;
    padding: 0 10px;
    cursor: pointer;
}

#user-menu > :not(.name) {
    color: var(--color-text-light);
    margin: 10px;
    background-color: var(--color-light);
    border-radius: var(--radius-s);
    line-height: 30px;
    cursor: pointer;
}

#user-menu > :last-child {
    margin-top: 0;
}

#user-menu > .delete {
    background-color: var(--color-info-error);
}

/*\
|*|     ERROR
\*/

.App > .error {
    background-color: var(--color-info-error);
    padding: var(--spacing-s);
    border-radius: var(--spacing-s);
    position: absolute;
    left: var(--spacing-m);
    top: calc(var(--spacing-l) + 100px);
    display: flex;
    align-items: center;
    text-align: center;
    max-width: 300px;
    max-height: 300px;
}

.App > .error > .dismiss {
    cursor: pointer;
    font-size: 1.5rem;
    margin-left: .5rem;
    user-select: none;
}

/*\
|*|     CONTENT
\*/

#content {
    position: relative;
    height: calc(100% - 100px);
    width: 800px;
    margin: 0 auto;
}

/* STATUS MESSAGE */

.App .status-msg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: normal;
    user-select: none;
}

/*      SIGN FORM       */

#sign-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12pt;
}

#sign-form > .btns {
    width: fit-content;
    margin-bottom: -1px;
    display: flex;
    align-items: flex-end;
}

#sign-form > .btns > div {
    border: none;
    background-color: var(--color-medium);
    color: var(--color-text-inactive);
    border-top-left-radius: var(--radius-l);
    border-top-right-radius: var(--radius-l);
    cursor: pointer;
    padding: 5px 50px;
}

#sign-form > .btns > div.active {
    background-color: var(--color-dark);
    color: var(--color-text-light);
}

#sign-form > form {
    display: flex;
    width: 600px;
    flex-direction: column;
    align-items: justify;
    background-color: var(--color-dark);
    border-radius: var(--radius-l);
    border-top-left-radius: initial;
    padding: 15px;
}

#sign-form > form > * {
    animation: fadeIn var(--duration-s) ease-out 1 normal;
}

#sign-form > form > *:not(:last-child) {
    margin-bottom: 20px;
}

#sign-form > form > div {
    display: flex;
    align-items: center;
}

#sign-form > form > div > input {
    flex: 1;
    margin-left: var(--spacing-s);
    height: 20px;
    border-radius: var(--radius-s);
    border: none;
}

#sign-form > form > input[type='submit'] {
    height: 25px;
    background-color: var(--color-func-green);
    color: var(--color-text-dark);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    font-size: 12pt;
    box-shadow: none;

    transition: all var(--duration-s) ease-out;
}

#sign-form > form > input[type='submit']:hover {
    box-shadow: var(--color-func-green) 0 0 10px 0;
}

/*      MAIN SCREEN     */

#main-screen {
    --scrollbar-width: .6vw;
    --form-size: 75px;

    background-color: var(--color-dark);
    border-radius: var(--radius-l);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: calc(100% - 2 * var(--spacing-l));
    transform: translate(-50%, -50%);
    animation: fadeIn var(--duration-s) ease-out 1 normal;
}

/* TODOS */

#main-screen > .todos {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2 * var(--spacing-m));
    height: calc(100% - 2 * var(--spacing-m));
    border-radius: var(--radius-l);
    overflow-y: scroll;
}


#main-screen > .todos > .todo {
    --todo-height: 60px;

    height: var(--todo-height);
    margin: var(--spacing-m) 0;
    margin-right: var(--spacing-m);
    width: auto;
    display: flex;
    align-items: center;
    background-color: var(--color-light);
    border-radius: var(--radius-s);
    animation: fadeIn var(--duration-s) ease-out 1 normal;
}

#main-screen > .todos > .todo:first-child {
    margin-top: 0;
}

#main-screen > .todos > .todo:last-child {
    margin-bottom: calc(var(--form-size) + var(--spacing-m));
}

#main-screen > .todos > .todo > .checkbox {
    --size: 30px;

    position: relative;
    margin: calc((var(--todo-height) - var(--size)) / 2);
    width: var(--size);
    height: var(--size);
    border: 2px solid var(--color-text-light);
    border-radius: var(--radius-s);
    cursor: pointer;
}

#main-screen > .todos > .todo > .text {
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: clip;
    font-size: 18pt;
    max-height: 100%;
}

#main-screen > .todos > .todo > .delete {
    --size: 30px;

    color: var(--color-info-error);
    font-size: 30pt;
    line-height: var(--size);
    margin: calc((var(--todo-height) - var(--size))/2);
    cursor: pointer;
    user-select: none;
}

#main-screen > .todos > .todo.done {
    background-color: var(--color-medium);
    color: var(--color-text-inactive);
}

#main-screen > .todos > .todo.done > .text {
    text-decoration: line-through;
}

#main-screen > .todos > .todo.done > .checkbox::after {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    color: var(--color-info-ok);
    text-align: center;
    font-size: 20px;
}

/* SCROLLBAR */

#main-screen > .todos::-webkit-scrollbar {
    width: var(--scrollbar-width);
    background-color: var(--color-light);
    border-radius: .3vw;
}

#main-screen > .todos::-webkit-scrollbar-thumb {
    background-color: var(--color-func-scroll-thumb);
    border-radius: calc(var(--scrollbar-width) / 2);
}

/* FORM */

#main-screen > form {
    width: var(--form-size);
    height: var(--form-size);
    border-radius: calc(var(--form-size) / 2);
    background-color: var(--color-func-green);
    position: absolute;
    right: calc(var(--spacing-m) * 2 + var(--scrollbar-width));
    bottom: var(--spacing-m);

    transition-duration: var(--duration-s);
    transition-property: 
        width,
        border-radius,
        left;
    transition-timing-function: ease-out;
}

#main-screen > form > [type='text'] {
    border-radius: var(--radius-l);
    position: absolute;
    top: var(--spacing-s);
    left: var(--spacing-s);
    padding: 0 var(--spacing-s);
    box-sizing: border-box;
    height: calc(var(--form-size) - 2 * var(--spacing-s));
    font-size: 18pt;
    width: 0;
    opacity: 0;
    border: 1px solid black;

    transition-duration: var(--duration-s);
    transition-property:
        opacity,
        width;
    transition-timing-function: ease-out;
}

#main-screen > form > .btn {
    cursor: pointer;
    user-select: none;
    color: var(--color-text-dark);
    line-height: var(--form-size);
    width: var(--form-size);
    text-align: center;
    font-size: 48pt;
    position: absolute;
    top: 0;
    right: 0;
}

#main-screen > form.open {
    border-radius: var(--radius-l);
    right: calc(var(--spacing-m) * 2 + var(--scrollbar-width));
    width: calc(100% - var(--spacing-m) * 3 - var(--scrollbar-width));
}

#main-screen > form.open > [type='text'] {
    opacity: 1;
    width: calc(100% - var(--form-size) - var(--spacing-s));
}